<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 选项卡 -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="组织架构" name="first" class="tab-pane">
              <treeTools :tree-node="company" :is-root="true" @addDepts="addDepts" />
              <!-- 树形组件位置 -->
              <el-tree :data="departs" default-expand-all :props="defaultProps">
                <treeTools slot-scope="{data}" :tree-node="data" @delDepts="getList" @addDepts="addDepts" @editDepts="editDepts" />
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
      <!-- 添加和编辑对话框 -->
      <depart-dialog ref="addDept" :dialog-title="dialogTitle" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getList" />
    </div>
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import {
  getDepartments
} from '@/api'
import { transListTree } from '@/utils/index'
import departDialog from './components/departDialog.vue'
export default {
  name: 'Departments',
  components: {
    treeTools,
    departDialog
  },
  data() {
    return {
      activeName: 'first',
      showDialog: false,
      defaultProps: {
        label: 'name'
      },
      node: null,
      // 新增company属性
      company: { },
      // 树列表数据
      departs: [
      ],
      dialogTitle: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      const result = await getDepartments()
      this.departs = transListTree(result.depts, '')
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // console.log('result', result)
    },
    // 添加
    addDepts(node) {
      //  弹框显示出来
      this.showDialog = true
      this.dialogTitle = '添加部门'
      // 记录当前的节点
      this.node = node
    },
    // 修改
    editDepts(node) {
      this.showDialog = true
      this.dialogTitle = '编辑部门'
      this.node = node
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  padding: 10px 30px;
}

.tab-pane {
  padding: 20px 80px;

  .company {
    margin-left: 12px;
    font-weight: bold;
    font-size: 14px;
  }

  .department-header {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
}
</style>
